<template>
  <div class="list-common">
    <div class="star-table-container">
      <el-table :data="tableData" style="width:70vw" :max-height="listHeight" @row-click="toBar" border >
        <el-table-column prop="questionid" label="id" min-width="5%" v-if="false" />
        <el-table-column prop="question" label="维度" min-width="20%"  />
        <el-table-column prop="excellent" label="优秀率" min-width="10%" />
        <el-table-column prop="good" label="良好率" min-width="10%" />
        <el-table-column prop="quiteGood" label="较好率" min-width="10%" />
        <el-table-column prop="commonly" label="一般率" min-width="10%" />
        <el-table-column prop="poor" label="较差率" min-width="10%" />
        <el-table-column prop="zbdf" label="指标得分值" min-width="10%" />
        <el-table-column prop="hyszb" label="好以上占比率" min-width="10%" />
      </el-table>
    </div>

    <!-- <div class="star-table-pagination">
      <el-pagination
        background
        :total="listTotal"
        :layout="pageOperate"
        :default-page-size="size"
        :page-sizes="listPageSizes"
        v-model:page-size="pageSize"
        @size-change="handleSizeChange"
        v-model:current-page="currentPage"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div> -->
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { stripe, size, pageOperate, listPageSizes } from '@/config/list'
import { getTotalQuestionData } from '@/api/business/questions/statistics/StatisticConfig'
import { events } from '@/bus'

import '@/style/list.less'

const listTotal = ref(0)
const pageSize = ref(size)
const currentPage = ref(1)
const tableData = ref([])

const loadListData = () => {
  getTotalQuestionData({
    year: new Date().getFullYear(),
    pageSize: pageSize.value,
    limit: currentPage.value,
    search: ''
  }).then(data => {
    const { total, list } = data
    listTotal.value = total
    tableData.value = list
  })
}

const listHeight = computed(() => {
  return 'calc(100vh - 285px)'
})

const listWidth = computed(() => {
  return '1024px'
})

const toBar = (row:any) => {
  events.emit('bindBarData', row.questionid)
}

const handleSizeChange = () => {
  loadListData()
}

const handleCurrentChange = () => {
  loadListData()
}

onMounted(() => {
  loadListData()
})
</script>
